<!DOCTYPE html>
<html>
<head>
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/main.css" />
    <script src="../www/js/jquery-1.7.1.min.js"></script>
    <script src="../www/js/g.js" charset="utf-8"></script>
    <style>

        #loading {
            position : absolute;
            top : 10rem;
            left : 0;
            width : 100%;
        }

        #loading #circle {
            display : block;
            width : 30px;
            margin : 0.5em auto;
        }

    </style>
</head>
<body>
<div class="app has-head has-banner">
    <div class="app-head">
        <ul class="row" style="padding-top:5px;">
            <li class="col v-m" style="padding-top:7px;">
                <p>姓名：张小雅</p>
                <p>学号：5876324</p>
                <p>专业：信息工程15级</p>
            </li>
            <li class="col t-r v-b">
                <img class="face" src="img/face.png"/>
            </li>
        </ul>
        <ul class="row">
            <li class="col v-t">
                <a class="btn btn-opatiy btn-conner has-icon c-b" href="预约.html"><img align="absmiddle" src="img/ion-clock.png"/>我要预约</a>
            </li>
            <li class="col t-r v-t">
                <a class="btn btn-opatiy btn-conner has-icon c-b" href="#"><img align="absmiddle" src="img/take-code.png"/>扫码就坐</a>
            </li>
        </ul>
    </div>
    <div class="app-view">
        <div class="app-view-content" >
            <div id="main">
                <section id="lf">
                </section>
                <section id="mid">
                    <div id="loading">
                        <canvas id="circle" width="30" height="30">
                            您的浏览器不支持canvas！
                        </canvas>
                    </div>
                    <div id="ctnt">
                       <div id="list">
                           <!--没有预约座位-->
                           <div class="app-null row" style="display:none;">
                               <div class="col">
                                   <img src="img/yuyue-no.png" />
                                   <p>您尚未预约座位, 快来吧！</p>
                               </div>
                           </div>
                           <!---->
                           <ul class="seat-list" id="target">
                               <li class="seat-item">
                                   <p class="item-time"><span class="item-num">1</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                                   <p class="item-txt">致未来图书馆1层测试自习室 2-8 座</p>
                                   <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                                   <ul class="row mt-1">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="查看座位.html"><img align="absmiddle" src="img/see.png"/>查看座位</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal1"><img align="absmiddle" src="img/change.png"/>更换座位</a>
                                       </li>
                                   </ul>
                                   <ul class="row top-line">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/edit.png"/>续约</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                                       </li>
                                   </ul>
                               </li>
                               <li class="seat-item">
                                   <p class="item-time"><span class="item-num">2</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                                   <p class="item-txt">致未来图书馆1层测试自习室 2-8 座</p>
                                   <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                                   <ul class="row mt-1">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="查看座位.html"><img align="absmiddle" src="img/see.png"/>查看座位</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal1"><img align="absmiddle" src="img/change.png"/>更换座位</a>
                                       </li>
                                   </ul>
                                   <ul class="row top-line">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/edit.png"/>续约</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                                       </li>
                                   </ul>
                               </li>
                               <li class="seat-item">
                                   <p class="item-time"><span class="item-num">3</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                                   <p class="item-txt">致未来图书馆1层102研修室预约人数2人，已签到0人，预约码43830</p>
                                   <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                                   <ul class="row top-line" style="margin-top:1rem;">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                                       </li>
                                   </ul>
                               </li>
                               <li class="seat-item">
                                   <p class="item-time"><span class="item-num">3</span>2016-06-08&nbsp;&nbsp;&nbsp;09:45-22:00</p>
                                   <p class="item-txt">致未来图书馆1层测试自习室 2-8 座</p>
                                   <p class="item-txt">距离签到时间<span class="c-p">3小时48分</span></p>
                                   <ul class="row mt-1">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="查看座位.html"><img align="absmiddle" src="img/see.png"/>查看座位</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal1"><img align="absmiddle" src="img/change.png"/>更换座位</a>
                                       </li>
                                   </ul>
                                   <ul class="row top-line">
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#open-modal2"><img align="absmiddle" src="img/cancel.png"/>取消</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/edit.png"/>续约</a>
                                       </li>
                                       <li class="col t-c">
                                           <a class="btn has-icon c-b" href="#"><img align="absmiddle" src="img/port.png"/>签到</a>
                                       </li>
                                   </ul>
                               </li>
                           </ul>
                       </div>
                    </div>
                </section>
                <section id="rt">
                </section>
            </div>

        </div>
    </div>
    <div class="app-footer">
        <div class="nav row">
            <a class="col active" href="首页.html">首页</a>
            <a class="col" href="预约.html">预约</a>
            <a class="col" href="记录.html">记录</a>
            <a class="col" href="设置.html">设置</a>
        </div>
    </div>
</div>
<div id="open-modal1" class="modal-window">
    <div class="row">
        <div class="col v-m">
            <div class="modal-title">
                <h2>更换座位</h2>
                <a href="#modal-close" title="Close" class="modal-close"></a>
            </div>
            <img src="img/change-seat.png" />
            <p>请您选择更换的方式</p>
            <a class="btn btn-block btn-conner btn-blue" href="#">手动更换</a>
            <a class="btn btn-block btn-conner btn-pink" href="#">扫码更换</a>
        </div>
    </div>
</div>
<div id="open-modal2" class="modal-window">
    <div class="row">
        <div class="col v-m">
            <div class="modal-title">
                <h2>取消预约</h2>
                <a href="#modal-close" title="Close" class="modal-close"></a>
            </div>
            <img src="img/cancel-seat.png" />
            <h3>2016-06-08     09:45-22:00<br>致未来图书馆1层测试自习室 2-8 座</h3>
            <p>您确定要取消此次预约吗</p>
            <a class="btn btn-block btn-conner btn-blue" href="#">确定</a>
        </div>
    </div>
</div>
<script src="./dist/avalon.js"></script>
<script src="js/touch.js"></script>
<script src="js/move.js"></script>
<script src="js/index.refresh.js"></script>
</body>
</html>
